/* ---------- 导航栏显示隐藏二维码 ---------- */
(function () {
    const header_nav_app = document.querySelector('.header-nav-app');
    const trl = document.querySelector('.trl');
    const down_box = document.querySelector('.down-box');
    header_nav_app.addEventListener('mouseover', function () {
        trl.style.display = 'block';
        down_box.style.height = 148 + 'px';
        header_nav_app.addEventListener('mouseout', function() {
            trl.style.display = 'none';
            down_box.style.height = 0 + 'px';
        })
    })
})();

/* ---------- 导航栏显示购物车 ---------- */
(function () {
    const shoppingCart = document.querySelector(".Shopping-Cart");
    const show_cart = document.querySelector('.show-cart');
    shoppingCart.addEventListener('mouseover',function(){
        show_cart.style.height = 100 + 'px';
        shoppingCart.addEventListener('mouseout',function(){
            show_cart.style.height = '';
        })
    });
})();

/* ---------- 搜索物品 ---------- */
function search() {
    let search = $("#search");
    let text_list = $(".text-list");
    let li_List = $(".text-list li");               // 遍历li
    let act_index = 0;
    
    $(li_List).each(function (idx, val) {     // 索引，<li>···</li>
        $(val).mouseover(function () {
            liElem = $(this).text();          // 鼠标滑过li的值
            $(".search-text").attr("value", liElem);

            act_index = idx;
            sel()
        })
    })
    
    function sel() {
        let act = document.querySelector(".search-active");
        act && (act.className = "");
        
        li_List[act_index].className = "search-active";
        $(".search-text").attr("value", li_List[act_index].innerHTML);
    }

    $(search).focus(function () {
        $(text_list).css('display','block');
    })
    $(search).blur(function () {
        $(text_list).css('display','none');
    })

    $(search).keydown(function (event) {
        let e = event || window.event;
        var code = e.which || e.keyCode;
        if(code === 38){
            act_index--;
            if(act_index < 0) act_index = li_List.length - 1;
            sel();
        }
        if(code === 40){
            act_index++;
            if(act_index >= li_List.length) act_index = 0;
            sel();
        }
    })
}
search();

/* 二级菜单 */
(function () {
    const menu_list_nav = document.querySelectorAll(".menu-list-nav li");
    const menu_list_item = document.querySelectorAll(".menu-list-item");
    
    for (let i = 0; i < menu_list_nav.length; i++){
        menu_list_nav[i].onmouseover = function () {
            // menu_list_item[i].style.display = "none";
            menu_list_item[i].style.display = "block";
        }
        menu_list_nav[i].onmouseout = function () {
            menu_list_item[i].style.display = "none";
        }
        menu_list_item[i].onmouseover = function () {
            menu_list_item[i].style.display = "block";
        }
        menu_list_item[i].onmouseout = function () {
            menu_list_item[i].style.display = "none";
        }
    }
})();

(function () {
    const nav_category = document.querySelector('.nav-category');
    const menu_list = document.querySelectorAll('.menu-list')[0];
    nav_category.onmouseenter = function () {
        menu_list.style.display = 'block';
    }
    nav_category.onmouseleave = function () {
        menu_list.style.display = 'none';
    }
    menu_list.onmouseenter = function () {
        menu_list.style.display = 'block';
    }
    menu_list.onmouseleave = function () {
        menu_list.style.display = "none";
    }
})();

/* ---------- 显示隐藏商品列表图 ---------- */
(function(){
    const nav_li = $(".nav-list .nav-item");
    const commodityWrap = $(".nav-commodity-wrap");
    const commodity_ul = $(".nav-commodity ul");
    
    nav_li.hover(function () {
        commodityWrap.stop().slideDown(300);
    }, function () {
        commodityWrap.stop().slideUp(300);
    });
    commodityWrap.hover(function () {
        $(this).stop().show();              // .nav-commodity-wrap
    }, function () {
        $(this).stop().slideUp(300);
    });
    nav_li.hover(function () {
    // 获得第一个元素的名称和索引
        const index = $(this).index();      // li.nav-item
        commodity_ul.eq(index).show().siblings().hide();
    });
})();

/* ---------- 放大镜 和 选项卡 和 轮播图  ---------- */
// (function () {
    // class Magnifier {
        
    //     // 获取节点的方法
    //     getEle(tag, single = true) {
    //         // 单个节点对象
    //         if (single) {
    //             return document.querySelector(tag);
    //         } else {
    //             // 多个节点对象
    //             return document.querySelectorAll(tag);
    //         }
    //     }
    
    //     constructor() {
    //         this.s_box = this.getEle('.smallimg-box');
    //         this.s_img = this.s_box.children[0];
    //         this.frame = this.s_box.children[1];
    //         this.b_box = this.getEle(".bigimg-box");
    //         this.b_img = this.b_box.children[0];
    
    //         this.btn_left = this.getEle("#left");
    //         this.btn_right = this.getEle("#right");
    
    //         this.banner_box = this.getEle(".magnifier-banner-wrap ul");
    //         this.banner_img = this.banner_box.querySelectorAll("li img");
    //         // this.banner_box.style.width = (this.banner_img.length + 1) * this.banner_img[0].offsetWidth + "px";
    //         this.index = 0;
            
    //         this.addEvent();
    //     }
    
    //     addEvent = function () {
    //         const that = this;
    
    //         this.s_box.onmouseenter = function () {
    //             that.show();
    //         }
    
    //         this.s_box.onmousemove = function (eve) {
    //             const e = eve || window.event;
    //             that.move(e);
    //         }
    
    //         this.s_box.onmouseleave = function () {
    //             that.hide();
    //         }
    
    //         this.btn_left.onclick = function () {
    //             that.left_changeIndex();
    //         }
    //         this.btn_right.onclick = function () {
    //             that.right_changeIndex();
    //         }
    
    //         for (let i = 0; i < this.banner_img.length; i++) {
    //             this.banner_img[i].onmouseover = () => {
    //                 for (let j = 0; j < this.banner_img.length; j++) {
    //                     this.banner_img[j].style.border = "2px solid #e0e0e0";
    //                 }
    //                 // console.log(i);
    //                 this.b_img.src = this.s_img.src = this.banner_img[i].src;
    //                 this.banner_img[i].style.border = "2px solid #ff0036";
    //             }
    //         }
    //     }
        
    //     show = function () {
    //         this.frame.style.display = "block";
    //         this.b_box.style.display = "block";
            
    //         this.frame.style.width = (this.b_box.offsetWidth / this.b_img.offsetWidth) * this.s_box.offsetWidth + "px";
    //         this.frame.style.height = (this.b_box.offsetHeight / this.b_img.offsetHeight) * this.s_box.offsetHeight + "px";
    //     }
    
    //     hide = function () {
    //         this.frame.style.display = "none";
    //         this.b_box.style.display = "none";
    //     }
    
    //     move = function (e) {
    //         let l = e.pageX - this.s_box.offsetLeft - this.frame.offsetWidth / 2 - 130;
    
    //         let t = e.pageY - this.s_box.offsetTop - this.frame.offsetHeight / 2 - 150;
    
    //         if (l < 0) l = 0;
    //         if (t < 0) t = 0;
    //         if (l > this.s_box.offsetWidth - this.frame.offsetWidth) {
    //             l = this.s_box.offsetWidth - this.frame.offsetWidth;
    //         }
    //         if (t > this.s_box.offsetHeight - this.frame.offsetHeight) {
    //             t = this.s_box.offsetHeight - this.frame.offsetHeight;
    //         }
    
    //         this.frame.style.left = l + "px";
    //         this.frame.style.top = t + "px";
    
    //         const x = l / (this.s_box.offsetWidth - this.frame.offsetWidth);
    //         const y = t / (this.s_box.offsetHeight - this.frame.offsetHeight);
    
    //         this.b_img.style.left = (this.b_box.offsetWidth - this.b_img.offsetWidth) * x + "px";
    //         this.b_img.style.top = (this.b_box.offsetHeight - this.b_img.offsetHeight) * y + "px";
    //     }

    //     left_changeIndex = function () {
    //         if (this.index === 0) {
    //             this.index = 0;
    //         } else {
    //             this.index--;
    //         }

    //         this.render();
    //     }
        
    //     right_changeIndex = function () {
    //         console.log(this.index, this.banner_img.length - 9);
    //         if (this.index === this.banner_img.length - 9) {
    //             this.index = 1;
    //             // this.banner_box.style.left = 0 + "px";
    //         } else {
    //             this.index++;
    //         }
    //         this.render();
    //     }
    //     render = function () {
    //         move(this.banner_box, {
    //             left: -this.index * this.banner_box.offsetWidth,
    //         })
    //     }

    //     /* 第二种方法 */
    //     //     if (this.index === this.banner_img.length - 5) {
    //     //         this.index = 0;

    //     // render = function () {
    //     //     move(this.banner_box, {
    //     //         left: -this.index * this.banner_img[0].offsetWidth,
    //     //     })
    //     // }


    // }
    // new Magnifier();
    
    /* ---------- 选择 ---------- */
//     let s_img = document.querySelector(".smallimg-box img");
//     let b_img = document.querySelector(".bigimg-box img");
//     let Network = document.querySelector(".Network");
//     let phone_type = document.querySelectorAll(".phone-type dd");
//     let Package = document.querySelector(".Package");
//     let storage = document.querySelectorAll(".storage-type dd");
//     const arr = ["../images/goods-phone6.jpg", "../images/goods-phone2.jpg"];
    
//     // Network.onclick = function () {
//     //     Network.style.border = "2px solid #ff0036";
//     //     Network.style.margin = "-1px 3px 3px -1px";
//     // }
    
//     for (let i = 0; i < phone_type.length; i++) {
//         phone_type[i].onclick = function () {
//             for (let j = 0; j < phone_type.length; j++) {
//                 console.log(phone_type[j]);
//                 phone_type[j].style.border = "1px solid #b2b7bd";
//                 phone_type[j].style.margin = "0px 4px 4px 0px";
//             }
//             phone_type[i].style.border = "2px solid #ff0036";
//             phone_type[i].style.margin = "-1px 3px 3px -1px";
    
//             s_img.src = arr[i];
//             b_img.src = arr[i];
//         }
//     }
    
//     // Package.onclick = function () {
//     //     Package.style.border = "2px solid #ff0036";
//     //     Package.style.margin = "-1px 3px 3px -1px";
//     // }
    
//     for (let i = 0; i < storage.length; i++) {
//         storage[i].onclick = function () {
//             for (let j = 0; j < storage.length; j++) {
//                 storage[j].style.border = "1px solid #b2b7bd";
//                 storage[j].style.margin = "0px 4px 4px 0px";
//             }
//             storage[i].style.border = "2px solid #ff0036";
//             storage[i].style.margin = "-1px 3px 3px -1px";
//         }
//     }
// })();


/* ---------- 商品数量加减 ---------- */
(function () {
    let amount = document.querySelector(".amount input");
    let btn = document.querySelector(".mui-amount-btn");
    let btn_plus = btn.children[0];
    let btn_reduce = btn.children[1];
    
    let num = amount.value - 0;
    amount.onblur = function () {
        num = amount.value;
        reduce();
        plus();
    }

    function plus() {
        btn_plus.onclick = function () {
            num++;
            amount.value = num;
        }
    }
    plus();

    function reduce() {
        btn_reduce.onclick = function () {
            num--;
            if (num < 1) {
                num = 1;
            }
            amount.value = num;
        }
    }
    reduce();
})();

// ----------------------------------------------------------------------------------

// function move(ele, data, cb){
//     clearInterval(ele.t);
//     ele.t = setInterval(() => {
//         let flag = true;
//         for(let attr in data){
//             let now = parseInt(getStyle(ele, attr));
            
//             let speed = (data[attr] - now) / 20;
//             speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
            
//             ele.style[attr] = now + speed + "px";
            
//             if(now !== data[attr]){
//                 flag = false;
//             }
//         }
//         if(flag){
//             clearInterval(ele.t);
//             cb && cb();
//         }
//     }, 20);
// }
    
// // 获取非行内样式的兼容封装
// function getStyle(ele, attr){
//     if(getComputedStyle){
//         return getComputedStyle(ele)[attr]
//     }else{
//         return ele.currentStyle[attr]
//     }
// }

/* ---------- 登录成功之后，存储登录成功的标志 --------- */
const login = document.querySelectorAll(".login")[0];
const welcome = document.querySelectorAll(".login-welcome")[0];
const wel_sign = welcome.querySelector("span");
const exit = document.querySelector(".exit");

if (localStorage.getItem("state") === "ok") {
    login.style.display = "none";
    welcome.style.display = "block";
    wel_sign.innerHTML = localStorage.getItem("user");
}

exit.addEventListener("click", function () {
    localStorage.getItem("state", "");
    login.style.display = "block";
    welcome.style.display = "none";
    wel_sign.innerHTML = localStorage.getItem("user");
})

const shop = document.querySelectorAll(".shop")[0];
shop.addEventListener("click", function () {
    if (localStorage.getItem("state") !== "ok") {
        if (confirm("你还没登录，请先登录！")) {
            location.href = "../html/Login.html";
        }
        return false;
    }
})